<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/amazeui.css" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../load/load.css" />
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.top {
				height: 50px;
				background-color: #FF608E;
				line-height: 50px;
				color: white;
				padding: 0px 5px;
				text-align: center;
			}
			
			.topback {
				font-size: 14px;
				float: left;
			}
			
			.bianji {
				font-size: 14px;
				float: right;
			}
			
			.mysiyi,
			.mysheying,
			.myjiudian {
				margin: 10px;
				padding: 10px;
			}
			
			.mytop {
				background-color: #FF608E;
				color: white;
				font-weight: bold;
				border-radius: 10px;
				text-align: center;
				height: 50px;
				line-height: 50px;
				margin-bottom: 5px;
			}
			
			.mysiyi>.mytop {
				background-color: #5EB95E;
			}
			
			.myjiudian>.mytop {
				background-color: #586C94;
			}
			
			.mymain {
				border: 1px solid #007AFF;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				font-size: 14px;
				padding: 5px;
				border-radius: 10px;
				margin-bottom: 5px;
			}
			
			.mainimg {
				display: -webkit-box;
				-webkit-box-align: center;
				-webkit-box-pack: center;
				padding: 5px;
				border-bottom: 1px solid #007AFF;
				margin-bottom: 5px;
			}
			
			.mainimg img {
				border: 3px solid #007AFF;
				border-radius: 40px;
				width: 70px;
			}
			
			.myjiudian .mainimg img {
				width: 100%;
				border: 2px solid #586C94;
			}
			
			.mydiv,
			.myzhifu {
				display: -webkit-box;
			}
			
			.mydiv div,
			.myzhifu div {
				width: 50%;
				text-align: center;
			}
			
			.myzhifu span:last-of-type {
				color: white;
				display: inline-block;
				background-color: #FF608E;
				padding: 0px 5px;
				border-radius: 5px;
			}
			
			.am-modal-dialog {
				border: 1px solid #FF608E;
				background-color: white;
				border-radius: 20px;
			}
			
			.showdiv {
				padding: 5px;
				font-size: 14px;
				background-color: white;
				-webkit-box-flex: 1;
				margin: 0px 20px;
				padding: 10px;
				border-radius: 10px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}
			
			.showdiv>div {
				display: -webkit-box;
				-webkit-box-align: center;
				-webkit-box-pack: center;
				text-align: center;
				margin-bottom: 10px;
			}
			
			.showdiv>div>div {
				-webkit-box-flex: 1;
			}
			
			.on {
				color: #FF608E;
			}
			
			.showzhifu {
				margin: 0px 20px;
				background-color: #FF608E;
				padding: 5px;
				border-radius: 10px;
				color: white;
			}
			
			.showback {
				background-color: #E9E9E9;
				margin: 0px 20px;
				padding: 5px;
				border-radius: 10px;
			}
		</style>
	</head>

	<body>
		<div class="top" data-am-sticky>
			<span @click="back" class="topback Hui-iconfont Hui-iconfont-slider-left"></span>
			<span>我的<label>Y&M</label></span>
			<span class="bianji"></span>
		</div>
		<div class="main">
			<div class="mysheying">
				<div class="mytop">
					我的摄影
				</div>
				<!--load图-->
				<div class="csshub-loading" v-if="load">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>

				<div class="mymain" v-for="item in infoa">
					<div class="mainimg"><img :src="item.attributes.headimg" /></div>
					<div class="mydiv">
						<div>
							姓名
						</div>
						<div v-html="item.attributes.othername">
							唐吉可德
						</div>
					</div>
					<div class="mydiv">
						<div>
							职业
						</div>
						<div>
							大摄影师
						</div>
					</div>
					<div class="mydiv">
						<div>
							联系方式
						</div>
						<div v-html="item.attributes.phone">
							155-2233-3232
						</div>
					</div>
					<div class="myzhifu">
						<div>
							支付状态
						</div>
						<div>
							<span class="xq" @click="showdiv(item)">详情</span>
						</div>
					</div>
				</div>
			</div>
			<div class="mysiyi">
				<div class="mytop">
					我的司仪
				</div>
				<!--load图-->
				<div class="csshub-loading" v-if="load">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div class="mymain" v-for="item in infob">
					<div class="mainimg"><img :src="item.attributes.headimg" /></div>
					<div class="mydiv">
						<div>
							姓名
						</div>
						<div v-html="item.attributes.othername">
							黑墨顶个
						</div>
					</div>
					<div class="mydiv">
						<div>
							职业
						</div>
						<div>
							深情司仪
						</div>
					</div>
					<div class="mydiv">
						<div>
							联系方式
						</div>
						<div v-html="item.attributes.phone">
							155-2233-3232
						</div>
					</div>
					<div class="myzhifu">
						<div>
							支付状态
						</div>
						<div>
							<span class="xq" @click="showdiv(item)">详情</span>
						</div>
					</div>
				</div>
			</div>
			<div class="myjiudian">
				<div class="mytop">
					我的酒店
				</div>
				<!--load图-->
				<div class="csshub-loading" v-if="load">
					<div></div>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</div>
				<div class="mymain" v-for="item in infoc">
					<div class="mainimg"><img :src="item.attributes.headimg" /></div>
					<div class="mydiv">
						<div>
							名称
						</div>
						<div v-html="item.attributes.othername">
							索马里
						</div>
					</div>
					<div class="mydiv">
						<div>
							联系方式
						</div>
						<div v-html="item.attributes.phone">
							155-2233-3232
						</div>
					</div>
					<div class="mydiv">
						<div>
							地址
						</div>
						<div v-html="item.attributes.site">
							天津市西青区乃开创元塞卡多健康撒肯德基阿斯克22231号大厅背面
						</div>
					</div>
					<div class="myzhifu">
						<div>
							支付状态
						</div>
						<div>
							<span class="xq" @click="showdiv(item)">详情</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--点击详情显示div-->
		<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
			<div class="am-modal-dialog">
				<div class="showdiv">
					<div class="showname">
						<div>名称</div>
						<div v-html="showname">东方不败</div>
					</div>
					<div class="showtime">
						<div>预定日期</div>
						<div v-html="showtime">2016-12-23</div>
					</div>
					<div v-if="showstate==1" class="showyajin">
						<div class="on">押金</div>
						<span class="on">--</span>
						<div>首款</div>
						<span>--</span>
						<div>尾款</div>
					</div>
					<div v-if="showstate==2" class="showyajin">
						<div class="on">押金</div>
						<span class="on">--</span>
						<div class="on">首款</div>
						<span class="on">--</span>
						<div>尾款</div>
					</div>
					<div v-if="showstate==3" class="showyajin">
						<div class="on">押金</div>
						<span class="on">--</span>
						<div class="on">首款</div>
						<span class="on">--</span>
						<div class="on">尾款</div>
					</div>
					<div v-if="showstate==3" class="showzhifu" @click="okdiv">
						完成
					</div>
					<div v-else class="showzhifu" @click="adddiv">
						付款
					</div>
					<div class="showback" @click="backdiv">
						取消
					</div>
				</div>
			</div>
		</div>
		<script src="../js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/amazeui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/av-min-2.1.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="vue/myvuea.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		</script>
	</body>

</html>